<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation</title>
  </head>
  <body>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
    <circle cx="50" cy="50" r="25" style="fill:red;">
    <set attributeName="r" to="50" begin="3s" />
    <animate
    attributeName="cx"
    begin="3.2s"
    dur="8s"
    from="50"
    to="90%"
    repeatCount="indefinite" />
  </svg>
  </body>
</html>
